import { Dropdown, Tooltip } from '@/components/eai-design';
import Button from '@/components/eai-design/button';
import GradientDiv from '@/components/GradientBox/GradientDiv';
import { SvgIcon } from '@/components/icon';
import AvatarDisplay from '@/components/work-modal/components/AvatarDisplay';
import { MenuProps, Tag } from 'antd';
import React from 'react';

interface ToolsItemProps {
  name: string;
  description: React.ReactNode;
  icon: string;
  author: string;
  categoryCN?: string;
  isMine?: boolean;
  status?: React.ReactElement;
  onEdit: () => void;
  onDelete: () => void;
}

const ToolsItem = ({
  name,
  description,
  icon,
  author,
  categoryCN,
  isMine = true,
  status = undefined,
  onDelete,
  onEdit,
}: ToolsItemProps) => {
  const items: MenuProps['items'] = [
    {
      key: '1',
      icon: <SvgIcon icon="edit" size={16} color="var(--text-5)" />,
      label: <span className="pr-7 text-[13px] text-text-5">编辑</span>,
      onClick: (e) => {
        e?.domEvent?.stopPropagation();
        onEdit();
      },
    },
    {
      key: '2',
      icon: <SvgIcon icon="delete-icons" size={16} color="var(--text-5)" />,
      label: <span className="text-[13px] text-error">删除</span>,
      onClick: (e) => {
        e?.domEvent?.stopPropagation();
        onDelete();
      },
    },
  ];

  return (
    <GradientDiv
      className="group flex flex-col gap-2 rounded-xl bg-fill-1 p-4 hover:bg-[#fff]"
      boxShadow={false}
      onClick={() => {
        if (isMine) {
          onEdit();
        }
      }}
    >
      <div className="flex flex-col gap-2">
        <div className="flex items-center gap-2 min-w-0">
          <div className="flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-md bg-[#fff] group-hover:bg-fill-1">
            <AvatarDisplay src={icon} className="h-[24px] w-[24px]" size={24} imgType='square' />
          </div>
          <div className="ml-2 flex-1 min-w-0 text-sm font-font-weight-600 text-text-5">
            <div className="truncate">
              <Tooltip title={name} placement="top">
                <span className="block truncate">{name}</span>
              </Tooltip>
            </div>
            {categoryCN && (
              <Tooltip title={categoryCN} placement="top">
                <Tag className="font-normal max-w-full truncate">{categoryCN}</Tag>
              </Tooltip>
            )}
          </div>
        </div>
        <Tooltip
          title={description}
          placement="topLeft"
          className="whitespace-pre-line"
          mouseEnterDelay={0.4}
        >
          <div className="mt-2 line-clamp-2 min-h-[2.5rem] text-ellipsis whitespace-pre-line text-xs leading-5 text-text-4">
            {description}
          </div>
        </Tooltip>
        <div className="mt-2 flex min-h-[24px] items-center gap-2">
          <span className="text-xs text-text-3">由 {author} 创建</span>
          {isMine && (
            <Dropdown className="ml-auto" menu={{ items }} trigger={['click', 'hover']}>
              <Button
                type="text"
                size="small"
                className="group"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                }}
                icon={
                  <SvgIcon
                    className="group-hover:text-error"
                    icon="work-more"
                    size={20}
                    color="var(--text-3)"
                  />
                }
              ></Button>
            </Dropdown>
          )}
        </div>
      </div>
      {status && <>{status}</>}
    </GradientDiv>
  );
};

export default ToolsItem;
